<template>
  <q-dialog v-model="visible">
    <q-card>
      <q-card-section>
        <div class="text-h6">{{ $t(lang + "坐标系选择") }}</div>
      </q-card-section>
      <q-separator />
      <q-card-section class="q-gutter-y-md">
        <q-select
          style="min-width: 15rem"
          outlined
          behavior="menu"
          v-model="targetFrame"
          :options="options"
          :use-input="!targetFrame"
          @filter="filterFn"
          clearable
          :label="$t(lang + '参考坐标')"
          emit-value
          map-options
        />
        <q-select
          style="min-width: 15rem"
          outlined
          behavior="menu"
          v-model="sourceFrame"
          :options="options"
          :use-input="!sourceFrame"
          @filter="filterFn"
          clearable
          :label="$t(lang + '工具坐标')"
          emit-value
          map-options
        />
      </q-card-section>
      <q-slide-transition>
        <div v-if="sourceFrame && targetFrame">
          <q-btn
            no-caps
            stretch
            class="full-width"
            color="primary"
            :label="$t(lang + '获取坐标数据')"
            icon="check"
            @click="getPosture"
          />
        </div>
      </q-slide-transition>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from "vue";
import { api } from "boot/axios.js";
import { useAPIStore } from "stores/api";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";

const t = useI18n().t;
const lang = "StorageManage.GetCurrentPosture.";
defineExpose({ show });
const props = defineProps({
  modelValue: { type: Object },
});
const $q = useQuasar();
const visible = ref(false);
const posture = ref({});
const targetFrame = ref(""); // 参考坐标
const sourceFrame = ref(""); // 工具坐标
const frameOptions = ref([]); // 坐标系选项
const options = ref([]); //  坐标系选项

// 显示窗口获取坐标信息
function show() {
  getFrameList();
  visible.value = true;
  posture.value = props.modelValue;
}
// 获取所有坐标系
function getFrameList() {
  api
    .post(
      useAPIStore().amrUrl + "ros/call",
      {},
      { params: { service: "tf/list_frames" } }
    )
    .then((res) => {
      frameOptions.value = res.data.values.frames;
    });
}
// 筛选获取后的坐标
function filterFn(val, update) {
  if (val === "") {
    update(() => {
      options.value = frameOptions.value;
    });
    return;
  }

  update(() => {
    const needle = val.toLowerCase();
    options.value = frameOptions.value.filter(
      (v) => v.toLowerCase().indexOf(needle) > -1
    );
  });
}

// 获取坐标系下面的点位信息
function getPosture() {
  api
    .post(
      useAPIStore().amrUrl + "ros/call",
      {
        target_frame: targetFrame.value,
        source_frame: sourceFrame.value,
      },
      { params: { service: "tf/get_frame_pose" } }
    )
    .then((res) => {
      const pose = res.data.values.pose;
      posture.value.frameID = pose.header.frame_id;
      posture.value.qw = pose.pose.orientation.w;
      posture.value.qx = pose.pose.orientation.x;
      posture.value.qy = pose.pose.orientation.y;
      posture.value.qz = pose.pose.orientation.z;
      posture.value.x = pose.pose.position.x;
      posture.value.y = pose.pose.position.y;
      posture.value.z = pose.pose.position.z;
    })
    .then(() => {
      $q.notify({
        type: "positive",
        message: t(lang + "获取姿态成功"),
      });
      visible.value = false;
    })
    .catch(() => {
      $q.notify({
        type: "negative",
        message: t(lang + "获取姿态失败"),
      });
    });
}
</script>
